<template>
  <div
    ref="container"
    class="fade-in-section"
    :class="{ visible: isVisible }"
  >
    <slot />
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'

const isVisible = ref(false)
const container = ref(null)

let observer
onMounted(() => {
  observer = new IntersectionObserver(
    ([entry]) => {
      if (entry.isIntersecting) {
        isVisible.value = true
        observer.unobserve(entry.target) // 只触发一次
      }
    },
    { threshold: 0.1 }
  )
  if (container.value) observer.observe(container.value)
})

onUnmounted(() => {
  if (container.value && observer) observer.unobserve(container.value)
})
</script>

<style scoped>
.fade-in-section {
  opacity: 0;
  transform: translateY(40px);
  transition: all 0.8s ease;
  will-change: opacity, transform;
}
.fade-in-section.visible {
  opacity: 1;
  transform: translateY(0);
}
</style>
